{% block sw_category_detail_products %}
<div class="sw-category-detail-products">

    {% block sw_category_detail_product_assignment %}
    <sw-many-to-many-assignment-card
        v-if="category.type !== 'folder'"
        display-variants
        :title="$tc('sw-category.base.products.productAssignmentHeadline')"
        :entity-collection="category.products"
        :columns="productColumns"
        :is-loading="isLoading"
        :disabled="!acl.can('category.editor')"
        :local-mode="category.isNew()"
        :criteria="productCriteria"
        :select-label="$tc('sw-category.base.products.productAssignmentLabel')"
        :placeholder="$tc('sw-category.base.products.productAssignmentPlaceholder')"
        @paginate="onPaginateManualProductAssignment"
    >

        {% block sw_category_detail_product_assignment_type_select %}
        <template #prepend-select>

            {% block sw_category_detail_product_assignment_type_select_field %}
            <sw-single-select
                v-model:value="category.productAssignmentType"
                class="sw-category-detail-products__product-assignment-type-select"
                :label="$tc('sw-category.base.products.productAssignmentTypeLabel')"
                :error="categoryProductAssignmentTypeError"
                :options="productAssignmentTypes"
                :disabled="!acl.can('category.editor')"
                required
                show-clearable-button
            />
            {% endblock %}

            {% block sw_category_detail_product_assignment_manual_alert %}
            <mt-banner
                v-if="category.productAssignmentType === 'product_stream' && manualAssignedProductsCount > 0"
                variant="info"
            >
                {{ $tc('sw-category.base.products.alertManualAssignedProductsOnAssignmentTypeStream') }}
            </mt-banner>
            {% endblock %}
        </template>
        {% endblock %}

        {% block sw_category_detail_product_assignment_stream_select %}
        <template
            v-if="category.productAssignmentType === 'product_stream'"
            #select
        >

            {% block sw_category_detail_product_assignment_stream_select_field %}
            <sw-entity-single-select
                v-model:value="category.productStreamId"
                class="sw-category-detail-products__product-stream-select"
                entity="product_stream"
                show-clearable-button
                :disabled="!acl.can('category.editor')"
                :label="$tc('sw-category.base.products.productAssignmentTypeStreamLabel')"
                :help-text="dynamicProductGroupHelpText"
                :placeholder="$tc('sw-category.base.products.productAssignmentTypeStreamPlaceholder')"
                :error="productStreamInvalidError || categoryProductStreamIdError"
            />
            {% endblock %}

            {% block sw_category_detail_product_assignment_stream_preview_link %}
            <div class="sw-category-detail-products__product-stream-preview-link">
                <router-link
                    v-if="category.productStreamId"
                    :to="{ name: 'sw.product.stream.detail', params: { id: category.productStreamId } }"
                >
                    {{ $tc('sw-category.base.products.dynamicProductGroupDetailLinkText') }}
                    <mt-icon
                        name="regular-long-arrow-right"
                        size="16px"
                    />
                </router-link>
            </div>
            {% endblock %}
        </template>
        {% endblock %}

        {% block sw_category_detail_product_assignment_stream_preview_grid %}
        <template
            v-if="category.productAssignmentType === 'product_stream'"
            #data-grid
        >
            <sw-product-stream-grid-preview
                :filters="productStreamFilter"
                :columns="productColumns"
            />
        </template>
        {% endblock %}

        {% block sw_category_detail_product_assignment_column_name %}
        <template #[nameColumn]="{ item, column }">
            <router-link
                :to="{ name: column.routerLink, params: { id: item.id } }"
            >
                <sw-product-variant-info :variations="item.variation">
                    {{ getItemName(item) }}
                </sw-product-variant-info>
            </router-link>
        </template>
        {% endblock %}

        {% block sw_category_detail_product_assignment_column_manufacturer %}
        <template #[manufacturerColumn]="{ item, column }">
            <router-link
                v-if="getManufacturer(item)"
                :to="{ name: column.routerLink, params: { id: item.manufacturerId } }"
            >
                {{ getManufacturer(item).name || getManufacturer(item).translated.name }}
            </router-link>
            <span v-else></span>
        </template>
        {% endblock %}

        {% block sw_category_detail_product_assignment_empty_state %}
        <template #empty-state>
            <mt-empty-state
                :icon="$route.meta.$module.icon"
                :headline="$tc('sw-category.base.products.productAssignmentEmptyStateDescription')"
            />
        </template>
        {% endblock %}

    </sw-many-to-many-assignment-card>
    {% endblock %}

</div>
{% endblock %}
